<template>
  <card :width="1400" style="display: flex;align-items: flex-start;">
    <div class="leftNav" v-loading="loading">
      <div v-for="(item,index) in columnList" :key="index"
           :class="item.id==currentColumn?'columnItem active':'columnItem'"
           @click="handleColumnClick(item.id)"
      >
        {{ item.columnName }}
      </div>
    </div>
    <div class="content">
      <div class="course_collect" v-loading="recommendLoading">
        <div
          @click="routeTo(item)"
          class="course_card"
          v-for="(item, index) in recommendCourseList"
          :key="index"
        >
          <div
            v-if="item.type == 0 || item.type == 1"
            class="tag"
            :class="{ bg_green: item.type == 1, bg_orange: item.type == 0 }"
          >
            {{ item.type == 0 ? '学校推荐' : '分院推荐' }}
          </div>
          <img class="img" :src="item.coursePic" alt="加载失败"/>
          <div class="course_name">
            <span v-if="item.courseType == 3">(工学一体)</span>
            <tooltip
              position="top"
              :text="item.courseName"
              :width="item.courseType == 3 ? 'calc(100% - 80px)' : '100%'"
            />
          </div>
          <div class="branch_name">
            <tooltip position="top" :text="item.branchName" width="100%"/>
          </div>
          <div class="card_bottom">
            <div class="teacher_name">{{ item.principalName }}</div>
            <el-popover placement="bottom" trigger="hover">
              <div class="hover_content">
                <div class="hover_left">
                  <div class="left_label">基础数据</div>
                  <div class="item">
                    <div class="label">题目数：</div>
                    <div class="value">
                      {{
                        item.topicNum
                          ? item.topicNum.toLocaleString('en-US')
                          : 0
                      }}
                    </div>
                  </div>
                  <div class="item">
                    <div class="label">考核数：</div>
                    <div class="value">
                      {{
                        item.examPaperNum
                          ? item.examPaperNum.toLocaleString('en-US')
                          : 0
                      }}
                    </div>
                  </div>
                  <div class="item">
                    <div class="label">练习数：</div>
                    <div class="value">
                      {{
                        item.practicePaperNum
                          ? item.practicePaperNum.toLocaleString('en-US')
                          : 0
                      }}
                    </div>
                  </div>
                </div>
                <div class="hover_left ml20">
                  <div class="left_label">学习数据</div>
                  <div class="item">
                    <div class="label">点击量：</div>
                    <div class="value">
                      {{
                        item.clickNum
                          ? item.clickNum.toLocaleString('en-US')
                          : 0
                      }}
                    </div>
                  </div>
                  <div class="item">
                    <div class="label">在学人数：</div>
                    <div class="value">
                      {{
                        item.stuStudyNum
                          ? item.stuStudyNum.toLocaleString('en-US')
                          : 0
                      }}
                    </div>
                  </div>
                  <div class="item">
                    <div class="label">结课人数：</div>
                    <div class="value">
                      {{
                        item.finishNum
                          ? item.finishNum.toLocaleString('en-US')
                          : 0
                      }}
                    </div>
                  </div>
                </div>
                <div class="hover_left ml20">
                  <div class="left_label">考核数据</div>
                  <div class="item">
                    <div class="label">累计考核人次：</div>
                    <div class="value">
                      {{
                        item.examNum ? item.examNum.toLocaleString('en-US') : 0
                      }}
                    </div>
                  </div>
                  <div class="item">
                    <div class="label">生均考核次数：</div>
                    <div class="value">
                      {{
                        item.avgExamNum
                          ? item.avgExamNum.toLocaleString('en-US')
                          : 0
                      }}
                    </div>
                  </div>
                  <div class="item">
                    <div class="label">首考通过率：</div>
                    <div class="value">
                      {{
                        item.firstExamPassingRate
                          ? item.firstExamPassingRate
                          : 0
                      }}%
                    </div>
                  </div>
                  <div class="item">
                    <div class="label">重考人次：</div>
                    <div class="value">
                      {{
                        item.applyNum
                          ? item.applyNum.toLocaleString('en-US')
                          : 0
                      }}
                    </div>
                  </div>
                  <div class="item">
                    <div class="label">生均重考次数：</div>
                    <div class="value">
                      {{
                        item.avgApplyNum
                          ? item.avgApplyNum.toLocaleString('en-US')
                          : 0
                      }}
                    </div>
                  </div>
                </div>
              </div>
              <div slot="reference" class="learn_num">
                <img
                  class="icon_task"
                  src="@/assets/images/icon_task.png"
                  alt="加载失败"
                />
                <div class="value">{{ item.examNum }}</div>
              </div>
            </el-popover>
          </div>
        </div>
        <div v-if="recommendCourseList.length == 0" class="empty_box">
          <el-empty description="暂无课程展示"></el-empty>
        </div>
      </div>
    </div>
  </card>
</template>

<script>

import { courseRecommendList, getColumnList } from '@/api/showColumn'

export default {
  name: 'detialDialog',
  data() {
    return {
      //推荐课程列表
      recommendCourseList: [],
      recommendLoading: false,
      // 专栏数组
      columnList: [],
      // 当前专栏,
      currentColumn: void 0,
      loading: false
    }
  },
  created() {
    this.getColumnData()
  },
  methods: {
    // 获取专栏数据
    async getColumnData() {
      try {
        this.loading = true
        this.recommendLoading = true
        let res = await getColumnList()
        if (res.code == 200) {
          this.columnList = res.rows
          this.currentColumn = this.columnList.length > 0 ? res.rows[0].id : void 0
          this.getColumCourseList()
        }
      } catch (e) {
        console.log(e)
      } finally {
        this.loading = false
      }
    },
    async getColumCourseList() {
      try {
        this.recommendLoading = true
        let res = await courseRecommendList({ columnId: this.currentColumn })
        if (res.code == 200) {
          this.recommendCourseList = res.rows
        }
      } catch (e) {
        console.log(e)
      } finally {
        this.recommendLoading = false
      }
    },
    handleColumnClick(id) {
      this.currentColumn = id
      this.getColumCourseList()
    },
    routeTo(item) {
      this.$router.push({
        path: '/allCourse/recommendCourseDetial',
        query: {
          courseId: item.courseId,
          branchId: item.branchId,
          type: 'detail'
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.leftNav {
  width: 320px;
  height: 100%;
  overflow: auto;
  padding: 24px 0;
  box-sizing: border-box;
  border-right: 1px solid #e8e8e8;

  .columnItem {
    width: 100%;
    padding: 7px 24px;
    box-sizing: border-box;
    margin-bottom: 10px;
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #333333;
    line-height: 22px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .columnItem:hover {
    color: #28B28B;
  }

  .active {
    color: #28B28B;
  }
}

.content {
  width: 100%;
  padding: 32px 40px;
  box-sizing: border-box;

  .course_collect {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 28px;
    height: calc(100vh - 170px);
    overflow: auto;

    .course_card {
      flex: 0 0 auto; /* 不拉伸，固定宽度 */
      width: 240px;
      height: 242px;
      background: #ffffff;
      border-radius: 18px;
      border: 1px solid #ebebeb;
      cursor: pointer;
      position: relative;

      .tag {
        position: absolute;
        top: 0;
        left: 0;
        width: 72px;
        height: 21px;
        border-radius: 9px 0 9px 0;
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 600;
        font-size: 14px;
        color: #ffffff;
        text-align: center;
      }

      .img {
        width: 100%;
        height: 156px;
        background: #24044e;
        border-radius: 9px 9px 0 0;
      }

      .course_name {
        margin-top: 4px;
        padding: 0 0 0 12px;
        box-sizing: border-box;
        line-height: 22px;
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 600;
        font-size: 17px;
        color: #333333;

        span {
          font-weight: 500;
          font-size: 12px;
          color: #f89a33;
          margin-right: 6px;
        }
      }

      .branch_name {
        padding: 0 12px 0 12px;
        box-sizing: border-box;
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: #999999;
      }

      .card_bottom {
        line-height: 22px;
        padding: 0 12px 0 12px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .teacher_name {
          font-family: PingFangSC, PingFang SC, sans-serif;
          font-weight: 400;
          font-size: 13px;
          color: #999999;
        }

        .learn_num {
          display: flex;
          align-items: center;

          .icon_task {
            width: 16px;
          }

          .value {
            margin-left: 4px;
            font-family: PingFangSC, PingFang SC, sans-serif;
            font-weight: 400;
            font-size: 13px;
            color: #999999;
          }
        }
      }
    }

    .empty_box {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      padding-top: 40px;
      box-sizing: border-box;
    }
  }
}

.bg_orange {
  background: #f89a33;
}

.bg_green {
  background: #11a983;
}

::v-deep .el-popover .el-popper {
  background: #ffffff;
  box-shadow: 0 0 20px 0 rgba(0, 74, 88, 0.1);
  border-radius: 8px !important;
}

.hover_content {
  display: flex;
  padding: 16px;
  box-sizing: border-box;

  .hover_left {
    .left_label {
      font-size: 18px;
      color: #1ab394;
      font-weight: bold;
    }

    .item {
      display: flex;
      align-items: center;
      padding: 6px 12px;
      box-sizing: border-box;

      .label {
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 400;
        font-size: 14px;
        color: #999999;
      }

      .value {
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 400;
        font-size: 14px;
        color: #333333;
      }
    }

    .item:first-child {
      margin-top: 0;
    }
  }
}
</style>
